<template>
  <div class="boxmr">
    <div class="l">
      <div class="one">Weekly orders</div>
      <div class="two">{{ getfg(`${countdaya}`) }}</div>
    </div>
    <div class="mz-dd"><div id="mz-dd"></div></div>
  </div>
</template>

<script setup lang="ts">
import { getfg } from "@/utile/fg";
import { onMounted, watch, ref } from "vue";
import themstore from "@/store/themctel/index";
import { getorderdata } from "@/api/index";
const usethemstore = themstore();
import * as echarts from "echarts";
const themcolor = ref<string>();
const themcolor2 = ref<string>();
const themcolor3 = ref<string>();
const dataaa = ref([]);
const countdaya = ref();
watch(
  () => usethemstore.chagethem,
  () => {
    setcharts();
  }
);
onMounted(() => {
  setcharts();
  getorderdatas();
});
const getorderdatas = async () => {
  const rudata = await getorderdata();
  if (rudata.code == 200) {
    countdaya.value = rudata.data.length;
    const newdata = rudata.data.map((i) => {
      return new Date(i.createdAt).getMonth() + 1;
    });
    const showdata = new Array(12).fill(0);
    newdata.forEach((i) => {
      showdata[i - 1]++;
    });
    dataaa.value = showdata;
    console.log(showdata);
    setcharts();
  }
};
const setcharts = () => {
  themcolor.value = getComputedStyle(document.documentElement).getPropertyValue(
    "--them-color"
  );
  themcolor2.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color2");
  themcolor3.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color3");
  const doms: HTMLDivElement = document.querySelector(
    "#mz-dd"
  ) as HTMLDivElement;
  const aa = echarts.init(doms);
  let option;

  const color = [
    themcolor.value,
    themcolor2.value,
    themcolor3.value,
    themcolor2.value,
    themcolor3.value,
  ];

  const datas = [
    { value: dataaa.value[0], name: "一月" },
    { value: dataaa.value[1], name: "二月" },
    { value: dataaa.value[2], name: "三月" },
    { value: dataaa.value[3], name: "四月" },
    { value: dataaa.value[4], name: "五月" },
    { value: dataaa.value[5], name: "六月" },
    { value: dataaa.value[6], name: "七月" },
    { value: dataaa.value[7], name: "八月" },
    { value: dataaa.value[8], name: "九月" },
    { value: dataaa.value[9], name: "十月" },
    { value: dataaa.value[10], name: "十一月" },
    { value: dataaa.value[11], name: "十二月" },
  ];

  option = {
    color,
    tooltip: {
      trigger: "item",
      extraCssText:
        "width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
      formatter: function (params: any) {
        let str =
          (params.data &&
            `<div style="font-weight: bold;">${params.name}</div>
          <div style="display:flex; justify-content: space-between; align-items: center;">
              <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${
                color[params.dataIndex]
              }; margin-right: 4px;"></span>占比</span>
              <span>${params.percent}%</span>
          </div>`) ||
          "";
        return str;
      },
    },
    series: [
      {
        type: "pie",
        radius: "65%",
        center: ["50%", "50%"],
        label: {
          normal: {
            formatter: "",
            rich: {
              xx: {
                fontSize: 14,
                lineHeight: 32,
              },
            },
          },
        },
        data: datas,
        itemStyle: {
          emphasis: {
            // 鼠标经过扇形区域时的阴影效果
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          normal: {
            length: 5,
            length2: 20,
            smooth: true,
            show: false,
          },
        },
      },
    ],
  };

  aa.setOption(option);
};
</script>

<style scoped lang="scss">
.boxmr {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  .l {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    gap: 20px;
    overflow: hidden;
    .one {
      color: #a6a8ac;
      font-size: 0.74vw;
    }
    .two {
      font-size: 1.2vw;
      font-weight: 700;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .three {
      display: flex;
      gap: 5px;
      font-size: 0.65vw;
      color: #a6a8ac;
      .iconfont {
        color: var(--them-color);
        font-size: 0.7vw;
      }
    }
  }
  .mz-dd {
    height: 100%;
    width: 50%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    #mz-dd {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
